<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08.箭头函数的实践</title>
</head>
<style>
  .div {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background: #ccc;
  }
</style>

<body>
  <div class="div"></div>
  <script>
    /* 
    需求一：点击两秒后盒子变成紫色
    需求二：从数组中返回偶数的元素
    */
    //需求一:点击两秒后盒子变成紫色
    //1.1 普通写法
    let div = document.querySelector(".div");
    /* div.onclick = function () {
      setTimeout(function () {
        div.style.backgroundColor = "purple";
      }, 100)
    } */
    //1.2 this写法
    /* div.onclick = function () {
      setTimeout(function () {
        console.log(this); //这里的this指向window
        this.style.backgroundColor = "purple";
      }, 100)
    } */

    //1.2 解决办法
    div.onclick = function () {
      let _this = this;
      console.log(_this);
      setTimeout(function () {
        console.log(_this); //这里的this指向盒子本身
        _this.style.backgroundColor = "purple";
      }, 100)
    }


    //1.3 ES6箭头函数写法
    /* div.addEventListener("click", function () {
      setTimeout(() => {
        //这里的this是静态的，会找到外层的函数div
        this.style.backgroundColor = "purple";
      }, 200);
    }); */


    //需求二:从数组中返回偶数的元素
    /* 
    let arr = [1, 2, 5, 6, 8, 9, 10, 7, 2, 20, 30, 15];
    let newArr = [];
    arr.forEach(function (item, index) {
      if (item % 2 == 0) {
        newArr.push(item);
      }
    }) 
    console.log(newArr);
    */

    /* const arr = [1, 2, 5, 6, 8, 9, 10];
    const result = arr.filter(function (item, index) {
      if (item % 2 === 0) {
        return true;
      } else {
        return false;
      }
    })
    console.log(result); */

    //简便一
    /* const result = arr.filter(item => {
      if (item % 2 === 0) {
        return true;
      } else {
        return false;
      }
    })
 */
    //简便二
    /* const result = arr.filter(item => item % 2 === 0)
    console.log(result); */


    /* 
    总结：箭头函数适合的场景
    1.箭头函数适合与this无关的回调：定时器，数组的方法回调
    2.箭头函数不适合于this有关的回调：事件回调，对象的方法
    */
  </script>

</body>

</html>